/* eslint-disable */
import React from 'react';
import classnames from 'classnames';
import { ListView, Icon } from 'antd-mobile';
import { ListViewProps as _ListViewProps } from 'antd-mobile/lib/list-view';
import Empty from '../Empty';
import styles from './index.less';

export interface ListViewProps
  extends Pick<
    _ListViewProps,
    | 'renderRow'
    | 'renderSeparator'
    | 'initialListSize'
    | 'pageSize'
    | 'useBodyScroll'
    | 'renderBodyComponent'
  > {
  className?: string;
  getData: (pageIndex: number, pageSize: number, payload?: any) => Promise<any>;
  pageSize?: number;
}

type State = {
  dataSource: typeof ListView.DataSource;
  isLoading: boolean;
  hasMore: boolean;
};

export default class MyListView extends React.PureComponent<ListViewProps, State> {
  static defaultProps = {
    useBodyScroll: true,
  };
  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => {
        return row1 !== row2;
      },
    });
    this.state = {
      dataSource,
      isLoading: true,
      hasMore: true,
    };
    this.PAGE_SIZE = this.props.pageSize || 20;
  }
  componentDidMount() {
    this.getData();
  }
  PAGE_SIZE;
  pageIndex = 0;

  data = [];
  reset = (payload) => {
    this.pageIndex = 0;
    this.data = [];
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.data),
      isLoading: true,
      hasMore: true,
    });
    this.getData(payload);
  };
  getData = async (payload = {}) => {
    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }
    const data = await this.props.getData(++this.pageIndex, this.PAGE_SIZE, payload);
    if (data && data.length > 0) {
      this.data = [...this.data, ...data];
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.data),
        isLoading: false,
      });
    } else {
      this.setState({
        isLoading: false,
        hasMore: false,
      });
    }
  };
  onEndReached = (event) => {
    if (this.state.isLoading || !this.state.hasMore) {
      return;
    }
    this.setState({ isLoading: true });
    this.getData();
  };
  render() {
    const { dataSource, isLoading, hasMore } = this.state;
    const {
      renderRow,
      className,
      initialListSize = 20,
      pageSize = 5,
      useBodyScroll,
      renderBodyComponent,
    } = this.props;
    return (
      <div className={`${styles.listView} ${className}`}>
        {dataSource && dataSource._cachedRowCount <= 0 ? (
          <React.Fragment>
            {!isLoading ? (
              <Empty className={styles.empty} />
            ) : (
              <div className={styles.footer}>
                <Icon type="loading" />
              </div>
            )}
          </React.Fragment>
        ) : (
          <ListView
            dataSource={dataSource}
            initialListSize={initialListSize}
            renderFooter={() => (
              <div className={styles.footer}>
                {this.state.isLoading ? <Icon type="loading" /> : hasMore ? '' : '没有更多了'}
              </div>
            )}
            renderBodyComponent={renderBodyComponent}
            renderRow={renderRow}
            className={styles.listView}
            pageSize={pageSize}
            useBodyScroll={useBodyScroll}
            scrollRenderAheadDistance={500}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={200}
          />
        )}
      </div>
    );
  }
}
